﻿@inject IJSRuntime JSRuntime

<div class="chart-container @(isPrinting ? "" : "non-printable-chart")">
    <TelerikButton OnClick="@Print" Icon="print" Class="print-button">Print this chart</TelerikButton>

    <TelerikChart Width="700px" Height="400px">
        <ChartSeriesItems>
            <ChartSeries Type="@SeriesType" Name="Product 1" Data="@series1Data">
            </ChartSeries>
            <ChartSeries Type="@SeriesType" Name="Product 2" Data="@series2Data">
            </ChartSeries>
        </ChartSeriesItems>

        <ChartCategoryAxes>
            <ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
        </ChartCategoryAxes>

        <ChartTitle Text="Quarterly revenue per product"></ChartTitle>

        <ChartLegend Position="@ChartLegendPosition.Right">
        </ChartLegend>
    </TelerikChart>
</div>

@code {
    [Parameter]
    public ChartSeriesType SeriesType { get; set; }


    bool isPrinting { get; set; }


    async Task Print()
    {
        isPrinting = true;
        await InvokeAsync(StateHasChanged);
        await Task.Delay(20);
        // we let the new class render in the browser before telling it to print so it can have effect
        await JSRuntime.InvokeVoidAsync("print");
        isPrinting = false;
    }

    public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
    public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}
